<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <link rel="icon" href="img/favicon.jpeg">
    <title>FPGA实验管理系统-注册界面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<style type="text/css">
    body{
        position:absolute;
        width: 100%;
        height: 100%;
        background:
                url(../img/aiqinhai.jpeg) no-repeat;
        -webkit-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .row { margin-top:3%; }
    .tx{
        font-size:30px;
        font-family: '华文仿宋';
    }
    .well{
        background:rgba(192,192,192,0.7);
    }
    .a{color:white}
</style>
<script>
    function checkInput(obj) {
        var val = obj.value;
        if(val == "") {
            return false;
        } else {
            return true;
        }
    }
    //提交校验
    function dosubmit() {
        var input1 = checkInput(document.getElementById('username'));
        var input2 = checkInput(document.getElementById('tel'));
        var input3 = checkInput(document.getElementById('userid'));
        var input4 = checkInput(document.getElementById('password'));
        var input5 = checkInput(document.getElementById('age'));
        var input6 = checkInput(document.getElementById('tel'));
        if (input1 && input2&& input3&& input4 && input5 && input6) {
            alert("恭喜您成功注册");
        } else {
            alert("输入不能为空");
        }
    }
    $(function() {

        $("#tel").focusout(function() {
            var tel = /^1[3578]\d{9}$/
            if (!tel.test($(this).val())) {
                $("#form_tel").prop("class", "form-group has-error");
                $("button[type='submit']").prop("disabled", true);
            } else {
                $("#form_tel").prop("class", "form-group");
                $("button[type='submit']").prop("disabled", false);
            }
        })
        $("#againpassword").focusout(function() {
            var password = $("#password").val();
            if ($(this).val() != password) {
                $("#form_pass").prop("class", "form-group has-error");
                $("button[type='submit']").prop("disabled", true);
            } else {
                $("#form_pass").prop("class", "form-group");
                $("button[type='submit']").prop("disabled", false);
            }
        })
        $(":text[name='username']").change(
            function() {
                var username = $(this).val();
                var arg = {
                    "username" : username
                };
                var url = "CheckUser";
                $.post(url, arg, function(data) {
                    if (data == "0") {
                        $("#message1").empty().html(
                            "<font color='red'>对不起，该用户名已经被注册！</font>");
                        $("#submit").prop("disabled", true);
                    } else if(data == "1") {
                        $("#message1").empty().html(
                            "<font color='green'>恭喜您，该用户名可以注册</font>");
                        $("#submit").prop("disabled", false);
                    }
                })
            })
        $("#userid").focusout(function() {
            var re = new RegExp("^[0-9]*[1-9][0-9]*$");
            if (!re.test(this.value)) {
                $("#form_pass").prop("class", "form-group has-error");
                $("button[type='submit']").prop("disabled", true);
                $("#message3").empty().html(
                    "<font color='red'>请输入数字（不含学号首字母）</font>");
                this.value = "";
                this.focus();
            }
            else{
                $("#message3").empty();
                $("#form_pass").prop("class", "form-group");
                $("button[type='submit']").prop("disabled", false);
            }
        })
        $("#age").focusout(function() {
            var re = new RegExp("^[0-9]*[1-9][0-9]*$");
                if (!re.test(this.value)) {
                    $("#form_pass").prop("class", "form-group has-error");
                    $("button[type='submit']").prop("disabled", true);
                    $("#message2").empty().html(
                        "<font color='red'>请输入整数</font>");
                    this.value = "";
                    this.focus();
                }
                else{
                $("#message2").empty();
                $("#form_pass").prop("class", "form-group");
                $("button[type='submit']").prop("disabled", false);
            }
        })
        $("#submit").click(function() {
            $(".form-horizontal").submit();
        })

    })

</script>
<script type="text/javascript">
    function openpage(){
        window.location.href="ind";
    }
</script>
<body>
<div class="container-fluid login">


    <div class="row">
        <br/>
        <p class="tx" style="text-align:center">用户注册</p>
        <div class="col-md-4"></div>
        <div class="well well-sm col-md-4">

        <div class="form-login">
            <%--<p class="tx" style="text-align:center">用户注册</p>--%>
            <span style="color:red">${message}</span>
            <form action="register" class="form-horizontal center-block" role="form" method="post">
                <div class="form-group" >
                    <%--@declare id="firstname"--%>
                    <label for="firstname" class="col-sm-2 control-label">学号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="userid"
                               id="userid" placeholder="请输入学号（不含学号首字母）">
                        <span id="message3"></span>
                    </div>
                </div>

                <div class="form-group">
                    <%--@declare id="secondname"--%>
                    <label for="secondname" class="col-sm-2 control-label">账号</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="username"
                               id="username" placeholder="请输入账号"> <span id="message1"></span>
                    </div>
                </div>
                <!--
                        一个class="form-group"就是一个输入框体
                    -->

                <div class="form-group">
                    <%--@declare id="thirdname"--%>
                    <label for="thirdname" class="col-sm-2 control-label">密码</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" name="password"
                               id="password" placeholder="请输入密码">
                    </div>
                </div>

                <div class="form-group" id="form_pass">
                    <%--@declare id="inputerror"--%>
                    <label for="inputError" class="col-sm-2 control-label">重复</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" name="password2"
                               id="againpassword" placeholder="请再次输入密码">
                    </div>
                </div>
                <div class="form-group" id="form_tel">
                    <label for="inputError" class="col-sm-2 control-label">电话</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="tel" id="tel"
                               placeholder="请输入电话">
                    </div>
                </div>
                <div class="form-group">
                    <%--<div class="col-sm-12">--%>
                    <div class="col-sm-2">
                        <label for="fourthname" >性别</label>
                    </div>
                    <div class="col-sm-10">&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="sex" value="男" checked><i class="fa fa-mars"></i><strong>男</strong>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="sex" value="女"><i class="fa fa-venus"></i><strong>女</strong>
                    </div>
                    <%--@declare id="fourthname"--%>

                </div>
                <div class="form-group">
                    <%--@declare id="lastname"--%>
                    <label for="lastname" class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="age" class="form-control" name="age"
                               id="age" placeholder="请输入你的年龄">
                        <span id="message2"></span>
                    </div>

                </div>
                <div class="form-group">

                        <div class="col-md-3"></div>
                        <div class="col-md-4">
                            <button id="sumbit" type="submit" class="btn btn-primary" onclick="dosubmit()">注册</button>
                        </div>
                    <div class="col-md-4">
                        <button  class="btn btn-primary" ><a class="a" href="fpga_index.jsp">退出</a></button>
                    </div>
                </div>

            </form>


        </div>
        </div>
    </div>
    </div>
</div>
</body>
</html>